<template>
  <app-dialog
    class="filter_edit"
    v-model="show"
    width="1000px"
    :title="title"
    @open="store.openFilterEdit()"
  >
    <div class="filter_edit_conter" v-loading="state.filtereditloading">
      <div class="filter_edit_header">
        <el-form inline v-if="state.activeFiltereditData.filter_name != null" label-width="90">
          <el-form-item label="过滤器名称:" style="width: 832px">
            <el-input v-model="state.activeFiltereditData.filter_name" />
          </el-form-item>
          <el-form-item label="联赛名称:" style="width: 400px">
            <app-lazy-select
              v-if="state.activeFiltereditData.filter_name != undefined"
              :name="`联赛名称`"
              :url="`/league/get_league_option`"
              :data="state.activeFiltereditData"
              :dataname="`league_id`"
              @changelazyselect="store.changelazyselect2"
            />
          </el-form-item>
          <el-form-item label="赛季时间:" style="width: 400px">
            <el-select
              v-model="state.activeFiltereditData.season_list"
              multiple
              :max-collapse-tags="2"
              collapse-tags
              placeholder="赛季时间"
              style="width: 100%"
            >
              <el-option v-for="item in state.seasonList2" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="filter_edit_list">
        <el-scrollbar height="100%">
          <FilterCollapse />
        </el-scrollbar>
      </div>
    </div>
    <template #footer>
      <el-button class="button" @click="store.updatafilter()">保存</el-button>
    </template>
  </app-dialog>
</template>

<script setup>
import FiltereditSearch from './FiltereditSearch.vue'
import FilterCollapse from './FilterCollapse.vue'
const show = defineModel({ type: Boolean })
const props = defineProps({
  title: String,
})
const { store, state } = inject('Filter')

</script>

<style lang="scss" scoped>
.button,
.button:hover {
  width: 60px;
  height: 32px;
  background-color: var(--pcmain-color);
  border-color: var(--pcmain-color);
  font-size: 14px;
  color: #fff;
}

.filter_edit_conter {
  height: 62vh !important;
}

.filter_edit_list {
  height: calc(100% - 100px);
  width: 100%;
  // background: red;
}
</style>

<style>
.filter_edit .app-dialog__body {
  padding: 24px;
}
.filter_edit .app-dialog__footer {
  padding: 0 0 24px 0;
}
</style>